<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>BeRTOS web server example</title>
		<link rel="stylesheet" type="text/css" media="screen" href="etc/style.css" />
		<script type="text/javascript" src="etc/js/jquery.js"></script>
		<script type="text/javascript" src="etc/js/excan.js"></script>
		<script type="text/javascript" src="etc/js/jqflot.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$.ajax({
					  url: "get_chipinfo",
					  dataType :'json',
					  async: false,
					  cache: false,
					  success: function(data){
					    	$.each(data,function(k,v){
					    		$('#'+k).text(v);
					    	});
   					  }
					});
   				var set_led_status = function(elm,status) {

   					if (status == 1) {
						elm.addClass('led-on').removeClass('led-off').text('ON').append("<span></span>");
   					} else {
   						elm.addClass('led-off').removeClass('led-on').text('OFF').prepend("<span></span>");
	   				}
   				}
   				$("span[id^=led]").click(function(){
   					var elm = $(this);
					if (elm.hasClass('led-off')) {
						var status = 1;
					} else {
						var status = 0;
					}
					set_led_status(elm, status);
					$.ajax({
					  url: "set_led",
					  async: false,
					  cache: false,
					  data:{'n':elm.attr('name'),'set':status},
					  dataType :'json',
					  success: function(){
					  }
					});
   				});
   				var options = {
			        series: { shadowSize: 0 },
			        yaxis:  { min: 0},
			        xaxis:  {min:0}
			    };

				var temperature_data = [];
				var plot_temperature = $.plot($("#temperature-plot"), [{label: "Temperature", data:temperature_data}], options);

			    function updateStatus() {

			$.ajax({
					  url: "status",
					  async: false,
					  cache: false,
					  dataType :'json',
					  success: function(data){

						 $('#potentiometer').width(200*(parseInt(data['volt'])/4095));
						 $('#potentiometer-value').text(data['volt'])
						 $('#uptime').text(data['up_time'] +' sec');
						 $('#temperature').text(data['temp']+' °C');
						 $('#local_ip').text(data['local_ip']);
						 $('#last_connected_ip').text(data['last_connected_ip']);
						 $('#tot_req').text(data['tot_req']);

						 $.each(data['leds'], function (key,v) {
							set_led_status($('#led-' + key), v);
							});

						 temperature_data.push([data['up_time'],data['temp']]);

						 var x = plot_temperature.getAxes().xaxis.options;
						 var y = plot_temperature.getAxes().yaxis.options;
						 x.max = Math.max(25,data['up_time']);
						 x.min = Math.max(0,(x.max - 25));

						 plot_temperature.setData([{label: "Temperature", data:temperature_data}]);
						 plot_temperature.setupGrid();
						 plot_temperature.draw();
						 setTimeout(updateStatus, 1000);
					  }
					});
			    }
			   updateStatus();
			});

		</script>
	</head>
	<body>

		<div id="wrapper">
			<div id="conteiner">
				<div id="header">

					<img src="etc/img/bertos.png" alt="BeRTOS Logo" />

					<div>
						<h1>web server example</h1><br>
						<h3>Remotely control your board via web browser</h3>
					</div>

				</div>
				<div class="content">
					<b>Hardware Info:</b><br>
					<b>CPU Core:</b><span id="core_name">--</span><br>
					<b>Chip name:</b><span id="arch_name">--</span><br>
					<b>SRAM size:</b><span id="sram_size">--</span><br>
					<b>Flash size:</b><span id="flash_size">--</span><br>
					<b>Boot from memory:</b><span id="mem_boot_type">--</span>
					<br>
					<b>Connections Info:</b><br>
					<b>Board IP:</b><span id="local_ip">--</span><br>
					<b>Your IP:</b><span id="last_connected_ip">--</span><br>
					<b>Total status requests:</b><span id="tot_req">--</span><br>
				</div>
				<div class="content">
					<div class="control">
						<b class="label">BeRTOS uptime:</b><span id="uptime" class="box">--</span><br>
						<b class="label">Current temperature:</b><span id="temperature" class="box">--</span><br/>
					</div>
					<div class="control">
						<b>Led status:</b><br/>
						<span id="led-0" name="0" class="led led-off">--</span><span id="led-1" name="1" class="led led-off">--</span><span id="led-2" name="2" class="led led-off">--</span>
					</div>
					<div class="control">
						<b>Potentiometer Value:</b><br/>
						<span class="trigger"><span id="potentiometer">&nbsp;</span></span>&nbsp;<span id="potentiometer-value">--</span>
					</div>
				</div>
				<div class="content">
						<b>Controller temperature:</b><br/>
						<div id="temperature-plot" class="temperature-plot"></div>
				</div>
				<div  class="content footer">
						Please visit <a href="http://www.bertos.org">www.berots.org</a> for more info
				</div>
			</div>
		</div>

	</body>
</html>
